<script lang="ts" setup>
import { ref, onBeforeMount, } from 'vue';
import { getMyMusicList, getCollectMusicList } from '@api';
import { useRouter } from 'vue-router';
import { useStore } from '@store/index';
import triangle_right from '../assets/triangle-right.svg'
import triangle_down from '../assets/triangle-down.svg'
import { storeToRefs } from 'pinia';
import { MusicList, } from '@/type';
const store = useStore()
const router = useRouter();
const BASEURL = store.baseUrl
const myMusicList = storeToRefs(store).getMyMusicList
const myCollectMusicList = ref<MusicList[]>([])
onBeforeMount(async () => {
    // 更新一次我创建的歌单的数据
    getMyMusicList()
    getCollectMusicList(store.UserInfo.id).then((res) => {
        if (res.data.code == 1) {
            myCollectMusicList.value = res.data.data
        }
    })
})
const openCreateList = store.openNewCollectModel
// 左侧前两项被点击高亮的项
const activeItem = ref(0);
/**
 * 侧边我的歌单的显示状态
*/
const activeList = ref(1);
/**
 * 侧边收藏的歌单的显示状态
 */
const activeCollectList = ref(0);
const tag = ['我的音乐', '我的歌手', '创建的歌单', '收藏的歌单']
const myMusicListIsShow = ref(1);
/**
 * 我创建的歌单
 */
const myCreateMusicListIncoSrc = ref([triangle_right, triangle_down])
/**
 * 展开/关闭 显示我创建的歌单
 */
const showMoreMusicList = () => {
    if (myMusicListIsShow.value == 1) {
        myMusicListIsShow.value = 0
    } else {
        myMusicListIsShow.value = 1
    }
}
/**
 * 展开/关闭 显示我收藏的歌单
 */
const showMoreMyCollectList = () => {

    if (activeCollectList.value == 1) {
        activeCollectList.value = 0
    } else {
        activeCollectList.value = 1;
    }
}
/**
 * 路由到其他页
 * @param index 0:我的音乐 1:我的歌手 2:创建的歌单 3:收藏的歌单
 * @param musicListId 歌单id
 * @param activeIndex 活动的项
 */
const routeTo = (index: number, musicListId?: string, activeIndex?: number) => {
    switch (index) {
        case 0:
            router.push({ path: '/my/myMusic' })
            activeItem.value = index
            break;
        case 1:
            router.push({ path: '/my/mySinger' })
            activeItem.value = index
            break;
        case 2:
            if (activeItem.value == 2) { }
            if (activeIndex != undefined) activeList.value = activeIndex;
            router.push({
                name: 'myMusicList',
                params: {
                    musicListId: musicListId,
                    disableSlide: 1
                }
            })
            break;
        case 3:
            if (activeIndex != undefined) activeList.value = activeIndex;
            router.push({
                name: 'myMusicList',
                params: {
                    musicListId: musicListId,
                    disableSlide: 1
                }
            })
            break
        default:
            router.push({ path: '/my/mySinger' })

    }
}
</script>
<template>
    <div class="container">
        <div class="left">
            <ul>
                <li @click="routeTo(0)" :class="{ item: true, active: activeItem == 0, itemHover: true }">
                    <p>{{ tag[0] }}</p>
                </li>
                <li @click="routeTo(1)" :class="{ item: true, active: activeItem == 1, itemHover: true }">
                    <p>{{ tag[1] }}</p>
                </li>
                <li class="item" @click="showMoreMusicList">
                    <img class="more" :src="myCreateMusicListIncoSrc[myMusicListIsShow]" alt="">
                    <p>{{ tag[2] + `(${myMusicList?.length})` }}</p>
                    <a @click="openCreateList" class="newBtn">
                        <img style="width: 15px;" src="../assets/add-999.svg" alt="">
                        新建
                    </a>
                </li>
                <li class="list" :class="{ activeList: index == activeList }" v-for="item, index of myMusicList"
                    v-show="myMusicListIsShow == 1" @click="routeTo(2, item.id, index)">
                    <img class="musicImage" :src="BASEURL + '/static/image/' + item.image" alt="">
                    <div class="listInfo">
                        <p class="listTitle">{{ item.title }}</p>
                        <p class="musicNum">{{ item.musicNum }}首</p>
                    </div>
                </li>
                <li @click="showMoreMyCollectList" class="item">
                    <img class="more" :src="myCreateMusicListIncoSrc[activeCollectList]" alt="">
                    <p>{{ tag[3] + `(${myCollectMusicList?.length != undefined ? myCollectMusicList?.length : 0})` }}</p>
                </li>
                <li @click="routeTo(3, list.id, index)" class="list" :class="{ activeList: false }"
                    v-for="list, index of myCollectMusicList" v-show="activeCollectList == 1">
                    <img class="musicImage" :src="BASEURL + '/static/image/' + list.image" alt="">
                    <div class="listInfo">
                        <p class="listTitle">{{ list.title }}</p>
                        <p class="musicNum">{{ list.musicNum }}首</p>
                    </div>
                </li>
            </ul>
        </div>
        <div :class="{ right: activeItem != 2, right_: activeItem == 2 }">
            <RouterView name="MyMusic" />
            <RouterView name="MySinger" />
            <RouterView name="MyMusicList" />
            <RouterView name="MyMusicListEdit" />
            <RouterView name="Upload" />
        </div>
    </div>
</template>
<style scoped lang="css">
.newBtn {
    text-align: center;
    font-weight: normal;
    display: flex;
    padding-right: 5px;
    border: 1px solid #ededed;
    margin-left: 5px;
}

.right_ {
    flex: 9;
    padding: 0;
}

/* 以上样式为修改musicList显示方法的样式 */
.listInfo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 130px;
    margin-left: 8px;
}




.musicImage {
    height: 40px;
    width: 40px;
}

.list .musicNum {
    color: #666;
}

.list .listTitle {
    /* 使文本不换行 */
    white-space: nowrap;
    overflow: hidden;
    margin-top: 2px !important;
    /* 超出部分显示为省略号 */
    text-overflow: ellipsis;
}

.list .listTitle,
.list .musicNum {
    margin: 0;
    font-size: 12px;
}

.activeList {
    background-color: #f7f7f7;
}

.list:hover {
    background-color: #f7f7f7;
}

.list {
    display: flex;
    padding: 10px 0;
    padding-left: 25px;
    cursor: pointer;
}

.musicImage {
    height: 40px;
    width: 40px;
}

.more {
    position: absolute;
    height: 15px;
    width: 15px;
    left: 25px;
}

.container {
    display: flex !important;
    align-items: normal !important;

}

.left {
    flex: 3;
    padding-top: 40px;
    border-right: 1px solid #ccc;
}

.left ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

.left .itemHover:hover {
    background-color: #f7f7f7;
}

.left .item {
    height: 35px;
    display: flex;
    padding-left: 45px;
    justify-content: left;
    font-weight: 700;
    font-size: 14px;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.active {
    background-color: #f7f7f7;
}

.left .item p {
    line-height: 35px;
    margin: 0;
}

.right {
    flex: 9;
    padding: 0 40px;
}
</style>